<template>
    <div class="section-header text-center section-header--dark">
        <h2>Meet with Our Expert Mentors</h2>
        <p class="style2">Minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. duis enim velit
            mollit.
            Exercitation veniam consequat.</p>
    </div>
    <div class="team__wrapper">
        <div class="row g-4 justify-content-center">
            <div v-for="(item, index) in mentors.slice(0, 4)" :key="index" class="col-xl-3 col-lg-4 col-sm-6">
                <div class="team__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                    <MentorCard :data="item" />
                </div>
            </div>
        </div>
        <div class="text-center">
            <nuxt-link to="/mentors" class="trk-btn trk-btn--border trk-btn--primary2 mt-5">Expert Mentors
                <span><i class="fa-solid fa-arrow-right"></i></span> </nuxt-link>
        </div>
    </div>
</template>

<script>
import MentorCard from '@/components/partials/MentorCard.vue'
export default {
    components: { MentorCard },
    props: {
        mentors: {
            type: Array,
            default: () => []
        }
    }
}
</script>